<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button>
    </li>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'MyItem',
        props:['todo'],
        methods:{
            handleCheck(id){                    
                pubsub.publish('checkTodo',id)
            },
            handleDelete(id,title){
                if(confirm("确定删除任务："+title+"吗？")){
                    this.$bus.$emit('deleteTodo',id)
                }
            }
		}
	}
        
</script>
<style scoped>
/* Item */
li {
	list-style: none;
	height: 36px;
	line-height: 36px;
	padding: 0 5px;
	border-bottom: 1px solid #ddd;
}
li label {
	float: left;
	cursor: pointer;
}
li label li input {
	vertical-align: middle;
	margin-right: 6px;
	position: relative;
	top: 2px;
}
li button {
	float: right;
	display: none;
	margin-top: 3px;
}
li:before {
	content: initial;
}
li:last-child {
	border-bottom: none;
}
li:hover {
	background-color: #ddd;
}
li:hover button {
	display: block;
}

</style>